<template>
  <div>
    <!-- 新增电视剧表单 -->
    <el-form ref="form" :rules="rules" :model="form" label-width="120px" style="width: 700px">
      <el-form-item label="封面图片" prop="imgs">
        <el-upload class="avatar-uploader" :action="`${UPLOADURL}/upload`" :show-file-list="false"
          :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <img v-if="form.imgs" :src="form.imgs" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="电视剧名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入电视剧名称"></el-input>
      </el-form-item>
      <el-form-item label="电视剧主演" prop="actor">
        <el-input v-model="form.actor" placeholder="请输入演员名字(用／隔开)"></el-input>
      </el-form-item>
      <el-form-item label="电视剧导演" prop="director">
        <el-input v-model="form.director" placeholder="请输入导演名字"></el-input>
      </el-form-item>
      <el-form-item label="上映时间" prop="showingon">
        <el-input v-model="form.showingon" placeholder="电视剧上映时间"></el-input>
      </el-form-item>
      <el-form-item label="电视剧评分" prop="score">
        <el-input v-model="form.score" placeholder="(10分为满分)"></el-input>
      </el-form-item>
      <el-form-item label="上映国家" prop="country">
        <el-input v-model="form.country" placeholder="请输入上映国家"></el-input>
      </el-form-item>
      <el-form-item label="电视剧简介" prop="cont">
        <el-input type="textarea" v-model="form.cont"></el-input>
      </el-form-item>
      <el-form-item label="推荐理由" prop="tj_cont">
        <el-input type="textarea" v-model="form.tj_cont"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">立即创建</el-button>
        <el-button @click="$refs.form.resetFields()">重置</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import httpApi from '@/http'


export default {
  data () {
    return {
      form: {
        imgs: '',
        type: 'dianshi',
        name: '',
        actor: '',
        showingon: '',
        score: '',
        cont: '',
        country: '',
        director: '',
        tj_cont: '暂无',
      },
      rules: {
        imgs: [
          { required: true, message: '必填', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '必填', trigger: 'blur' },
        ],
        director: [
          { required: true, message: '必填', trigger: 'blur' },
        ],
        actor: [
          { required: true, message: '必填', trigger: 'blur' },
        ],
        showingon: [
          { required: true, message: '必填', trigger: 'blur' },
        ],
        score: [
          { required: true, message: '必填', trigger: 'blur' },
        ],
        cont: [
          { required: true, message: '必填', trigger: 'blur' },
        ],
        tj_cont: [
          { required: true, message: '必填', trigger: 'blur' },
        ],
        country: [
          { required: true, message: '必填', trigger: 'blur' },
        ]
      }
    }
  },

  methods: {
    /** 提交表单 */
    submit () {
      console.log(this.form)
      // 表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          httpApi.dianshiApi.add(this.form).then(res => {
            console.log('新增电视剧', res)
            // 跳转到列表页面
            this.$router.push('/home/dianshi-list')
          })
        }
      })
    },


    /** 上传成功后执行 */
    handleAvatarSuccess (res, file) {
      console.log(res)
      this.form.imgs = res.data
    },

    /** 上传文件的格式 / 大小验证 */
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

  },

  /** 挂载完毕后执行 */
  mounted () {

  }
}
</script>

<style lang="scss" scoped></style>


<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  line-height: 128px;
  text-align: center;
}

.avatar {
  width: 128px;
  display: block;
}
</style>